<template>
	<view class="login-box">
		<view class="logo">
			<image src="/static/img/logo.png" mode="aspectFill"></image>
		</view>
		
		<view class="login">
			<view class="color-5 font-bold font-44">Welcome Dootask</view>
			<view class="font-24 color-a mtb-30">输入您的凭证以访问您的帐户。</view>
			
			<view class="ipt-box">
				<text class="iconfont icon-youjian_o"></text>
				<input v-model="username" type="text" placeholder="输入您的邮箱" placeholder-class="color-b" />
			</view>
			
			<view class="ipt-box">
				<text class="iconfont icon-mima"></text>
				<input v-model="password" type="password" placeholder="输入您的密码" placeholder-class="color-b" />
			</view>
			
			<view @tap="submit" class="bg-green radius-4 w-430 h-60 flex-centent font-26 color-f">{{loading?'登录中...':'登录'}}</view>
			
			<view class="w-430 font-20 mt-30">
				<text class="color-9">还没有账号？</text>
				<text @tap="$go('/pages/register/register')" class="color-green">注册账号</text>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				username:'admin@163.com',
				password:'123456',
			};
		},
		methods:{
			// 登录
			submit(){
				if(!this.username) return this.$toast('请输入您的邮箱')
				if(!this.password) return this.$toast('请输入您的密码')
				
				if(this.loading) return
				this.loading = true
				this.$api({
					name:'user',
					action:'login',
					params:{
						username:this.username,
						password:this.password
					}
				})
				.then(res=>{
					this.loading = false
					uni.setStorageSync('uni_id_token',res.token)
					uni.setStorageSync('uni_id_token_expired', res.tokenExpired)
					this.$store.dispatch('user/getUserInfo')
					this.$toast('登录成功')
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/index/index'
						})
					},1000)
				})
				.catch(err=>{
					this.loading = false
				})
				
				
			},
		}
	}
</script>

<style lang="scss">
	
	.ipt-box{
		border: 1px solid #f1f1f1;
		padding: 14rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		width: 430rpx;
		border-radius: 6rpx;
		box-sizing: border-box;
		
		text{
			font-size: 30rpx;
			color: #999;
		}
		input{
			flex: 1;
			padding: 0 20rpx;
			font-size: 24rpx;
		}
	}
	
	.login-box{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		min-height: 100vh;
		background: #F3F6FE;
		.logo{
			width: 160rpx;
			height: 160rpx;
			border-radius: 30rpx;
			overflow: hidden;
			margin-bottom: 40rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.login{
			background: #fff;
			width: 600rpx;
			padding: 60rpx 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			box-sizing: border-box;
			margin-bottom: 200rpx;
			border-radius: 10rpx;
		}
	}
</style>
